<template>
    <div>
        <div class="tab" style="display: flex;margin-top: 30px;font-size: 14px;margin-left:50px;">
            <!-- <div class="tab" style="display: flex;align-items: center">
            <div>订单号：</div>
            <div class="tabSearch" style="display: flex;">
                <el-input style="margin: 0 10px ;" v-model="orderData" placeholder="请输入订单号" @input="orderNum"></el-input>
            </div>
        </div> -->
        <div class="tab" style="display: flex;align-items: center;margin-right:100px;">
            <div>搜索</div>
            <div class="tabSearch" style="display: flex;">
                <el-input style="margin: 0 10px ;" v-model="phoneNumber" placeholder="请输入昵称/备注/手机号" @input="phoneNum"></el-input>
                <!-- <el-button type="primary" icon="el-icon-search" @click="searchExpert">搜索</el-button> -->
            </div>
        </div>

        <div class="block">
                <span class="demonstration" style="margin-right: 10px;">领取时间</span>
    <el-date-picker
      v-model="value1"
      type="daterange"
      @change="handleDateChange"

      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
  </div>
           
        </div>
        <div style="margin: 30px;">
           <span style="margin-right: 30px;">总领取优惠券：<span style="font-weight: bold;color: red;">{{sumData.sum_count}}</span></span>
           <span >今日领取优惠券：<span style="font-weight: bold;color: red;">{{sumData.today_count}}</span></span>
       </div>


       
        
               <div >
                <el-table :data="tableData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="id" label="ID" align="center">

            </el-table-column>
            <el-table-column prop="mobile" label="手机号" align="center">

            </el-table-column>
            <el-table-column prop="remark" label="备注" align="center">
            </el-table-column>
            <!-- <el-table-column prop="pay_time" label="支付时间" align="center">
                <template slot-scope="scope">
                    <div v-if="scope.row.pay_time==null">
                    --
                </div>
                <div v-else>{{ scope.row.pay_time }}</div>
            </template>

            </el-table-column> -->
            <el-table-column prop="nickname" label="昵称" align="center">

            </el-table-column>
            <el-table-column prop="title" label="优惠券名称" align="center">

            </el-table-column>
            <el-table-column prop="pay_time" label="使用状态" align="center">
                <template slot-scope="scope">

                    {{  scope.row.status == 0 ? '未使用' : '已使用'  }}
            </template>
            </el-table-column>

            <el-table-column prop="if_expire" label="过期状态" align="center">
                <template slot-scope="scope">

                    {{  scope.row.if_expire == 1 ? '未过期' : '已过期'  }}
            </template>

            </el-table-column>

            

            <el-table-column prop="create_time" label="领取时间" align="center">

            </el-table-column>
            <el-table-column prop="exp_time" label="过期时间" align="center">

            </el-table-column>
             
           
            <!-- <el-table-column prop="origin_price" label="原价" align="center">

            </el-table-column>
            <el-table-column prop="price" label="支付金额" align="center">

            </el-table-column> -->

        </el-table>
               </div>





        <div class="tabListPage">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="pageSizes" :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount">
      </el-pagination>
    </div>
    </div>
</template>

<script>
import { expertList,getCounponRecordList as consumeOrderList  } from '../../../libs/api'
export default {
    data() {
        return {
            tableData: [],
            orderData:'',
            orderType:'',
            phoneNumber:'',
            orderStatus:'',
            orderType:'',
            value1:'',
            orderStatusList:[{
                nickname:"已购买",
                id:'1'
            },{
                nickname:"已退款",
                id:'2'
            }],
            payTypeList:[{
                nickname:"方案",
                id:'1'
            },{
                nickname:"会员",
                id:'2'
            },{
                nickname:"ai会员",
                id:'3'
            },
            {
                nickname:"ai小球",
                id:'4'
            }
            ],
            allOodData: [],
            currentPage: 1,
            totalCount: 1,
            PageSize: 10,
            pageSizes: [5, 10],
            alltabData: [],
            orderTime:'',
            sumData:{},
            expertDataList: [],
            inputName:'',
            aiTable:[]
        }
    },
    created() {
        this.getOrderList()
        this.getExpertList()
    },
    methods:{
        // 获取专家
        getExpertList() {
            expertList({
                page: 1,
                limit: 1000
            }).then(res => {
                this.expertDataList = res.data.list
            })
        },
         // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage = val
      this.getOrderList()
    },
    // 分页
    // 每页显示的条数
    handleSizeChange(val) {
        console.log(8888)
      // 改变每页显示的条数
      this.PageSize = val
      // 点击每页显示的条数时，显示第一页
      console.log(val)
      this.PageSize = val
      // 改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1
      this.getOrderList()
    },
        handleDateChange(value){
            console.log(value)
            this.currentPage = 1

            this.orderTime = value[0]+"_"+value[1]
            const newDate1 = value[0].getFullYear() + '-' + (value[0].getMonth() + 1) + '-' + value[0].getDate();
            const newDate2 = value[1].getFullYear() + '-' + (value[1].getMonth() + 1) + '-' + value[1].getDate();
            console.log(newDate1+'-'+newDate2)
            this.orderTime = newDate1+'_'+newDate2
            this.getOrderList()
        },
        handleChangeExpert(value){
            this.getOrderList()
            console.log(value)
        },
        handleChange(value){

        },
        getOrderList(){
            consumeOrderList({
                page: this.currentPage,
                page_size: this.PageSize,
                order_time:this.orderTime,
                search:this.phoneNumber
            }).then(res=>{
                this.tableData = res.data.data
                this.totalCount = res.data.total
                this.sumData.today_count = res.data.today_count
                this.sumData.sum_count = res.data.sum_count
            })
        },
        orderNum(){
            this.getOrderList()
        },
        phoneNum(){
            this.currentPage = 1
            this.getOrderList()
        },
        handleChange(){
            this.getOrderList()
        },
        handleChangeType(){
            this.getOrderList()
        },



    }
}
</script>
<style>

</style>
